stanfordfandomcom-20200214-history
Interactive Pie Chart
USER INTERFACE Charts are an excellent way of visualizing useful data, however, most charts are created from spreadsheets or similar tables, which require significant manual data entry by the user. An interactive chart that allows the user to graphically edit and update the chart data would be easier and more intuitive. This report and the accompanying class presentation implements this graphical interaction for the pie chart, and the concepts of interaction applied here can also be applied to graphically editing bar charts, line graphs, etc. Mouse Create a New Slice To create a new slice, the user only has to double click with the mouse, at which point a dialog box will pop up to ask for a label for that slice. After clicking OK, the slice will appear from the horizontal until the location of the double click. If a previous slice already exists, the new slice will appear from the edge of the previous slice to the location of the double click. Change Size of Slice To change the size of a slice, the user only has to click on the edge of that slice and drag it bigger or smaller as needed. Remove Slice To remove an existing slice, the user right clicks on that slice, and a dialog box will pop up to confirm removal of that slice. Update Chart The user can dynamically change the slice labeling and percentages by inputting information to the form at the bottom and clicking "Update Chart." When the user graphically changes the percentages, the form data is also updated. Save The code is all done in Javascript and HTML. If desired, clicking "Save" will invoke the form information to be sent to a designated script, which would usually be a CGI script on the server. We did not actually code a server side script, but we wanted to show that it is possible to link our browser-only implementation to the server. IMPLEMENTATION The whole interaction is implemented in Javascript using the HTML canvas tags which draw within the browser. The canvas is cleared and redrawn every 20 ms to ensure that changes done by the user are drawn on a clean canvas. Additionally, the information is saved to a form at the bottom of the page that is dynamically deleted and regenerated every time the user makes a change. ENCAPSULATION The interaction could easily be encapsulated as a Javascript library, and the pie chart information could be sent to the server through the HTML form at the bottom and processed by a CGI script. To be reused, initPieChart() needs to be called with 3 possible parameters: input data xml file, output CGI server script, and desired radius of pie chart. The default for the first 2 parameters is to be empty, and the default radius is 120 pixels. STRENGTHS The biggest strength of this interaction is how easy and intuitive it is for the user. Traditional pie charts are usually created out of spreadsheets or tables with data input by the user, but in the most natural interaction, the user should be able to dynamically change the chart as he or she sees fit. This interaction allows the user to make changes with simple mouse clicks and drags, without having to enter in data, while also giving the user this option. The entire interaction is developed using only Javascript and HTML. No proprietary technology such as Flash or Silverlight is required. WEAKNESSES As mentioned previously, one weakness of this interaction is that it is entirely browser side, making it difficult to 'save' the graphical information for later use. The graphical interface of the interaction uses the canvas element. Being a part of the HTML 5 standard, this ensures that all browsers will support the canvas element, however browser compatibility issues may arise which would not occur if using proprietary technology such as Flash.